<template>
  <div class="city">
    <!-- 头部 -->
    <mt-header
      :title="this.$store.state.nowCity.name"
      fixed
      style="height:3.125rem;font-size:18px"
    >
      <router-link to="/home" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>

    <!-- 搜索框，提交 -->
    <div>
      <div class="search">
        <input v-model="search" placeholder="输入学校、商务楼、地址" required />
        <mt-button
          type="primary"
          size="large"
          style="width:337px;height:32px;"
          @click.native="searchAddress"
          >搜索</mt-button
        >
      </div>
    </div>

    <div class="main">
      <div v-if="!this.addressList.length">
        <p style="font-size:13px;padding-left:5px">搜索历史</p>
        <div class="his">
          <ul>
            <li class="his_li" v-for="item in his" :key="item.index">
              <h4>{{ item.name }}</h4>
              <p>{{ item.address }}</p>
            </li>
          </ul>
          <div class="clear" @click="removeAll" v-if="this.his">
            清空所有
          </div>
        </div>
      </div>

      <div class="result" v-if="this.addressList.length">
        <ul>
          <li
            class="his_li"
            v-for="item in addressList"
            :key="item.index"
            @click="
              goAddress({
                name: item.name,
                latitude: item.latitude,
                longitude: item.longitude,
                address: item.address,
                geohash: item.geohash,
              })
            "
          >
            <h4>{{ item.name }}</h4>
            <p>{{ item.address }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  components: {},
  data() {
    return {
      search: "",
      addressList: {},
      his: "",
    };
  },
  methods: {
    // 搜索
    searchAddress() {
      if (this.search) {
        this.$axios
          .get("/api/v1/pois", {
            params: {
              city_id: this.$store.state.nowCity.id,
              keyword: this.search,
            },
          })
          .then((res) => {
            this.addressList = res.data;
            if (res.data == "") {
              Toast("无数据");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        Toast({
          message: "请输入搜索内容",
          position: "center",
          duration: 1000,
        });
      }
    },
    // 点击搜索结果列表
    goAddress(e) {
      let arr = [];
      if (sessionStorage.getItem("his")) {
        arr = JSON.parse(sessionStorage.getItem("his"));
        for (let i of arr) {
          if (i.geohash == e.geohash) {
            var isok = true;
          }
        }
        if (!isok) {
          arr.unshift(e);
        }
      } else {
        arr.unshift(e);
      }
      sessionStorage.setItem("his", JSON.stringify(arr));
      this.his = JSON.parse(sessionStorage.getItem("his"));
      this.addressList = "";
    },
    removeAll() {
      sessionStorage.clear();
      this.his = "";
    },
  },
  mounted() {
    if (sessionStorage.getItem("his")) {
      this.his = JSON.parse(sessionStorage.getItem("his"));
    }
  },
};
</script>

<style scoped lang="css">
.search {
  padding-top: 0.625rem;
  margin-top: 3.75rem;
  background-color: white;
  height: 5.625rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
}
.search input {
  padding-left: 0.625rem;
  height: 1.875rem;
  width: 20.3125rem;
  border-color: #f5f5f5;
  outline: 0;
  border-radius: 5px;
  margin-bottom: 0.9375rem;
}
.main {
  border-top: 2px solid #e4e4e4;
}
.his {
  margin-top: 0.3125rem;
  border-top: 2px solid #e4e4e4;
  background-color: white;
}
.his li {
  height: 3.5625rem;
  border-bottom: 1px solid #e4e4e4;
  padding-top: 0.625rem;
  padding-left: 0.3125rem;
}
.his li h4 {
  font-size: 15px;
  font-weight: normal;
  color: #333333;
  margin-bottom: 8px;
}
.his li p {
  font-size: 12px;
  color: #999999;
}
.clear {
  border-bottom: 1px solid #e4e4e4;
  height: 2.8125rem;
  text-align: center;
  color: #666;
  line-height: 2.8125rem;
}
.result {
  background-color: white;
}
.result li {
  height: 3.5625rem;
  border-bottom: 1px solid #e4e4e4;
  padding-top: 0.625rem;
  padding-left: 0.3125rem;
}
.result li h4 {
  font-size: 15px;
  font-weight: normal;
  color: #333333;
  margin-bottom: 8px;
}
.result li p {
  font-size: 12px;
  color: #999999;
}
</style>
